<template>
  <div class="app-container" style="background-color: #e6ecf1">
    <el-row :gutter="12">
      <el-col :span="8">
        <Card2 title="巡检任务统计" style="margin-bottom: 10px">
          <template #default>
            <el-row>
              <el-col :span="24">
                <BarVue ref="tasks"></BarVue>
              </el-col>
            </el-row>
          </template>
        </Card2>
      </el-col>
      <el-col :span="8">
        <Card2 title="巡检任务完成情况" style="margin-bottom: 10px">
          <template #default>
            <el-row>
              <el-col :span="24">
                <BarVue ref="taskswcqk"></BarVue>
              </el-col>
            </el-row>
          </template>
        </Card2>
      </el-col>
      <el-col :span="8">
        <Card2 title="巡检隐患统计-路线" style="margin-bottom: 20px">
          <template #default>
            <el-row>
              <el-col :span="24">
                <Bar2Vue ref="tasksyhlx"></Bar2Vue>
              </el-col>
            </el-row>
          </template>
        </Card2>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <Card2 title="巡检统计" style="margin-bottom: 20px">
          <template #subTitle>
            <el-radio-group v-model="tempType" size="mini" @change="initData2">
              <el-radio-button :label="0"> 全部</el-radio-button>>
              <el-radio-button :label="2"> 本月</el-radio-button>>
              <el-radio-button :label="1"> 今日</el-radio-button>>
            </el-radio-group>
          </template>
          <template #default>
            <el-row>
              <el-col :span="24">
                <Bar2Vue ref="xjrwtj"></Bar2Vue>
              </el-col>
            </el-row>
          </template>
        </Card2>
      </el-col>
      <el-col :span="16">
        <Card2 title="巡检任务统计" style="margin-bottom: 20px">
          <template #subTitle>
            <div style="height: 45px">
              <el-date-picker
                v-model="tjDate"
                type="daterange"
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="YYYY-MM-DD"
                @change="getDataByTime"
                style="line-height: 45px !important"
              />
              <el-button @click="resetDate" style="line-height: 45px"
                >重置</el-button
              >
            </div>
          </template>
          <template #default>
            <el-row>
              <el-col :span="24">
                <Bar2Vue ref="taskslx"></Bar2Vue>
              </el-col>
            </el-row>
          </template>
        </Card2>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Card from "./components/Card.vue";
import Card2 from "./components/Card2.vue";
import BarVue from "./components/Bar.vue";
import Bar2Vue from "./components/Bar2.vue";
import {
  countAll,
  countRy,
  countAllRy,
  countByLx,
  countByTime,
  countByType,
  countHidden,
} from "@/api/znxj/xjtj.js";
import SideTree from "@/components/SideTree";
import { deptTreeSelect } from "@/api/system/user";
const formatDate = (time) => {
  if (time) {
    const date = new Date(time);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();

    return `${year}-${padZero(month)}-${padZero(day)}`;
  } else {
    return null;
  }
};

//补零函数
function padZero(n) {
  return n < 10 ? "0" + n : n;
}
const tasks = ref();
const xjrwtj = ref();
const taskslx = ref();
const taskswcqk = ref();
const tasksyhlx = ref();
const initData = () => {
  countAll().then((res) => {
    let total = 0;
    const data = Object.keys(res.data).map((item) => {
      total += res.data[item];
      return {
        value: res.data[item],
        name: item,
      };
    });
    tasks.value.setData({
      data,
      total,
      title: "巡检任务统计",
    });
  });
  // countByLx({ type: 0 }).then((res) => {
  //   taskslx.value.setData({
  //     data: res.data.按路线统计.map((item) => item.count),
  //     yAxis: res.data.按路线统计.map((item) => item.name),
  //     title: "巡检统计",
  //   });
  // });
  // countByTime();
  // countByLx();
  countByType().then((res) => {
    let total = 0;
    const data = res.data.map((item) => {
      total += item.count;
      return {
        value: item.count,
        name: item.name,
      };
    });
    taskswcqk.value.setData({
      data,
      total,
    });
  });
  countHidden().then((res) => {
    tasksyhlx.value.setData({
      data: res.data.map((item) => item.count),
      yAxis: res.data.map((item) => item.name),
      title: "巡检隐患统计",
    });
  });
};

const tempType = ref(0);
const initData2 = () => {
  countAllRy({
    tempType: tempType.value,
  }).then((res) => {
    xjrwtj.value.setData({
      data: res.data.map((item) => item.count),
      yAxis: res.data.map((item) => item.name),
      title: "巡检统计",
    });
  });
};
//
const dateNow = Date.now();
const tjDate = ref([
  formatDate(dateNow - 3600 * 24 * 1000 * 3),
  formatDate(dateNow),
]);
const resetDate = () => {
  tjDate.value = [];
  getDataByTime();
};
const getDataByTime = () => {
  countByTime({
    startTime: tjDate.value[0] || null,
    endTime: tjDate.value[1] || null,
  }).then((res) => {
    const mapData = {};
    const keys = [];
    res.data.forEach((item) => {
      if (keys.includes(item.routeName)) {
        mapData[item.routeName].push(item);
      } else {
        keys.push(item.routeName);
        mapData[item.routeName] = [item];
      }
    });
    taskslx.value.setData({
      data: Object.keys(mapData).map((item) => mapData[item].length),
      yAxis: Object.keys(mapData),
      title: "巡检统计",
    });
  });
};
const treeData = ref([]);
onMounted(() => {
  deptTreeSelect().then((response) => {
    treeData.value = response.data;
  });
  initData();
  initData2();
  getDataByTime();
});
</script>

<style lang="scss" scoped></style>
